<template>
  <cus-form :nodes="nodes" ref="formRef"></cus-form>
  <div class="public">
    <span>保存位置：</span>
    <el-radio-group v-model="isPublic">
      <el-radio :label="0">个人库</el-radio>
      <el-radio :label="1">公共库</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-left: 13px;">
    <h3>已选择章节：{{ knowledgeList.length }}章</h3>
    <div class="tag-box"><el-tag size="mini" v-for="o in knowledgeList" :key="o.id">{{ o.name }}</el-tag></div>
  </div >
  
</template>
<script lang="ts">
import { ref, Ref, PropType } from 'vue';
import $, { emitter } from '$'

export default {
  props: {
    files: {
      type: Array as PropType<File[]>,
      default: () => []
    },
    knowledgeList: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    type: Number
  },
  setup(props) {
    let subjectCode = '';
    let nodes = ref([
      { label: '讲义名称', type: 'input', key: 'fileName', rule: { required: true, message: '请输入讲义名称' } },
    ]);
    let formRef = ref();
    let isPublic = ref(1);
    emitter.emit('effect', async (subject) => subjectCode = subject);
    const save = (resolve, reject) => {
      formRef.value.validate(valid => {
        if (valid) {
          $.http.json('/admin/material/saveMaterial', { 
            chapterId: props.knowledgeList.map(i => i.id),
            isPublic: isPublic.value,
            subject: subjectCode,
            type: props.type,
            ...valid
          }).then((res: any) => {
            if (res.result) {
              resolve(res)
              window.open(`./#/handout/false/${res.json.id}/${subjectCode}`);
            } else {
              reject()
            }
          })
        } else {
          reject();
        }
      })
    };

    return {  save, isPublic, nodes, formRef };
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  width: 100%;
  .el-upload-dragger {
    width: 100%;
    height: 180px;
    background: none;
  }
}
.upload-content {
  & > i {
    margin-top: 24px;
    color: #72b22a;
  }
  div {
    color: #1a2633;
    margin-bottom: 8px;
    span {
      color: #72b22a;
    }
  }
  p {
    color: #999;
    font-size: 12px;
    padding: 0 50px;
    i::after {
      content: '、';
      display: inline-block;
    }
  }
}
h3 {
  margin: 20px 0 10px;
}
:deep(.tag-box) {
  .el-tag {
    margin: 0 10px 10px 0;
  }
}
.public {
  margin: 20px 13px;
  span {
    margin-right: 10px;
  }
}
</style>
